<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script>
        window.onload = function () {
            document.getElementById("user").onblur = function () {
                var userName = this.value;
                var xhr = new XMLHttpRequest();
                if (window.ActiveXObject) { // IE浏览器的创建方式
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } else if (window.XMLHttpRequest) { // Netscape浏览器中的创建方式
                    xhr = new XMLHttpRequest();
                }
                //2、创建http请求
                xhr.open("GET", "user.json", true);
                //3、发送请求
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var userDatas = JSON.parse(xhr.responseText);
                        var flag = false;
                        for (var i = 0; i < userDatas.length; i++) {
                            if (userName == userDatas[i].user) {
                                alert("用户名正确");
                                flag = true;
                                break;
                            }
                        }
                        if (!flag) {
                            alert("用户名不存在");
                        }
                    }
                }
            }
            document.getElementById("loginBtn").onclick = function () {
                var userName = document.getElementById("user").value;
                var password = document.getElementById("password").value;
                var xhr = new XMLHttpRequest();
                if (window.ActiveXObject) { // IE浏览器的创建方式
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } else if (window.XMLHttpRequest) { // Netscape浏览器中的创建方式
                    xhr = new XMLHttpRequest();
                }
                //2、创建http请求
                xhr.open("GET", "user.json", true);
                //3、发送请求
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var userDatas = JSON.parse( xhr.responseText);
                        var flag = false;
                        for (var i = 0; i < userDatas.length; i++) {
                            if (userName == userDatas[i].user && password == userDatas[i].password) {
                                alert("登录成功");
                                location.href ="ajax.html";
                                flag = true;
                                break;
                            }
                        }
                        if (!flag) {
                            alert("登录失败");
                        }
                    }
                }
            }
        }
    </script>
</head>

<body>
    <input id="user" type="text" placeholder="请输入用户名" name="userName" value="" />
    <input id="password" type="password" placeholder="请输入密码" name="password" value="" />
    <button id="loginBtn">登录</button>
</body>

</html>